<template>
  <view class="footprint-page" :style="themeColorStyles">

    
    <!-- 内容区域 -->
    <view class="content-container">
      <!-- 统计信息卡片 -->
      <view class="stats-card" :style="{boxShadow: themeColorStyles.cardShadow, border: themeColorStyles.cardBorder}">
        <view class="stats-header">
          <text class="stats-title">浏览统计</text>
          <!-- 我的优惠券 - 暂时隐藏，下个版本再开发 -->
          <!-- <view class="coupon-btn" @click="goToCoupon">
            <text class="coupon-text">我的优惠券</text>
          </view> -->
        </view>
        
        <view class="stats-grid">
          <view class="stats-item" :style="{border: themeColorStyles.cardBorder}">
            <text class="stats-number" :style="{color: themeColorStyles.primaryColor}">{{ totalViews }}</text>
            <text class="stats-label">浏览商品</text>
          </view>
          <view class="stats-item" :style="{border: themeColorStyles.cardBorder}">
            <text class="stats-number" :style="{color: themeColorStyles.primaryColor}">{{ todayViews }}</text>
            <text class="stats-label">今日浏览</text>
          </view>
        </view>
      </view>
    

    
      <!-- 足迹列表 -->
      <view class="footprint-list" v-for="group in groupedFootprints" :key="group.date">
        <view class="date-header">
          <text class="date-text">{{ group.dateText }}</text>
          <text class="count-text">{{ group.items.length }}件</text>
        </view>
        
        <view class="product-grid">
          <view 
            class="product-card" 
            v-for="item in group.items" 
            :key="item.id"
            :style="{boxShadow: themeColorStyles.productCardShadow, border: themeColorStyles.cardBorder}"
            @click="viewProduct(item)"
          >
            <image class="product-image" :src="item.image" mode="aspectFill" />
            <view class="product-info">
              <text class="product-name">{{ item.name }}</text>
              <text class="product-price" :style="{color: themeColorStyles.primaryColor}">¥{{ item.price }}</text>
            </view>
          </view>
        </view>
      </view>
    
      <!-- 空状态 -->
      <view class="empty-container" v-if="allFootprintsData.length === 0">
        <view class="empty-content">
          <text class="empty-icon">📱</text>
          <text class="empty-text">暂无浏览记录</text>
          <text class="empty-desc">快去逛逛商品吧~</text>
        </view>
      </view>
      
      <!-- 加载状态提示 -->
      <view class="loading-status" v-if="displayedFootprints.length > 0">
        <text v-if="isLoading">加载中...</text>
        <text v-else-if="hasMore">上拉加载更多</text>
        <text v-else>没有更多足迹了</text>
      </view>
      
      <!-- 底部间距 -->
      <view class="bottom-space"></view>
    </view>
    

  </view>
</template>

<script>
import { getBrowseHistoryByUserId } from '@/api/browseHistory'
import { getToken } from '@/utils/auth'
import { API_CONFIG } from '@/api/config'
import { checkLoginStatus, handleApiError } from '@/utils/loginCheck'
import { getThemePrimaryColor, getThemeColorFromGlobal } from '@/utils/theme'

export default {
  data() {
    return {
      // 加载状态
      isLoading: false,
      isRefreshing: false,
      currentPage: 1,
      pageSize: 10,
      // 用户ID
      userId: null,
      
      // 所有足迹数据（从后端获取的真实数据）
      allFootprintsData: [],
      // 主题色
      primaryColor: '#4A90E2'
    };
  },
  
  // 页面加载时初始化数据
  onLoad() {
    this.initThemeColor();
    this.initFootprints();
  },
  
  // 页面滚动到底部时触发
  onReachBottom() {
    this.loadMoreFootprints();
  },
  
  computed: {
    // 总浏览数
    totalViews() {
      return this.allFootprintsData.length;
    },
    
    // 今日浏览数
    todayViews() {
      const today = new Date().toISOString().split('T')[0];
      return this.allFootprintsData.filter(item => item.date === today).length;
    },
    

    
    // 当前显示的足迹列表
    displayedFootprints() {
      // 按日期倒序排列所有数据（创建副本避免修改原数组）
      const sortedData = [...this.allFootprintsData].sort((a, b) => new Date(b.date) - new Date(a.date));
      return sortedData.slice(0, this.currentPage * this.pageSize);
    },
    
    // 是否还有更多足迹
    hasMore() {
      const sortedData = [...this.allFootprintsData].sort((a, b) => new Date(b.date) - new Date(a.date));
      return this.currentPage * this.pageSize < sortedData.length;
    },
    
    // 按日期分组的足迹
    groupedFootprints() {
      const groups = {};
      
      this.displayedFootprints.forEach(item => {
        if (!groups[item.date]) {
          groups[item.date] = {
            date: item.date,
            dateText: this.formatDate(item.date),
            items: []
          };
        }
        groups[item.date].items.push(item);
      });
      
      // 按日期倒序排列
      return Object.values(groups).sort((a, b) => new Date(b.date) - new Date(a.date));
    },

    // 主题色样式
    themeColorStyles() {
      return this.setThemeColorVariables(this.primaryColor)
    }
  },
  
  methods: {
    // 返回上一页
    goBack() {
      uni.navigateBack();
    },
    
    // 格式化日期
    formatDate(dateStr) {
      const date = new Date(dateStr);
      const today = new Date();
      const yesterday = new Date(today.getTime() - 24 * 60 * 60 * 1000);
      
      if (dateStr === today.toISOString().split('T')[0]) {
        return '今天';
      } else if (dateStr === yesterday.toISOString().split('T')[0]) {
        return '昨天';
      } else {
        const month = date.getMonth() + 1;
        const day = date.getDate();
        return `${month}月${day}日`;
      }
    },
    
    // 获取用户ID
    async getUserId() {
      const loginResult = await checkLoginStatus()
      return loginResult.isLoggedIn ? loginResult.userId : null
    },

    // 初始化足迹数据 - 从后端获取真实数据
    async initFootprints() {
      try {
        // 使用统一的登录检测
        const loginResult = await checkLoginStatus()
        if (!loginResult.isLoggedIn) {
          console.log('用户未登录，无法获取足迹数据')
          return
        }
        
        this.userId = loginResult.userId

        // 显示加载状态
        uni.showLoading({
          title: '加载中...'
        })

        this.currentPage = 1
        console.log('开始获取用户浏览历史数据，用户ID:', this.userId)
        
        // 调用API获取浏览历史数据
        const response = await getBrowseHistoryByUserId(this.userId)
        console.log('浏览历史API响应:', response)
        
        if (response.code === 200) {
          console.log('后端返回的原始数据:', response.rows)
          // 转换数据格式以适配前端显示
          this.allFootprintsData = this.transformBrowseHistoryData(response.rows || [])
          console.log('转换后的浏览历史数据:', this.allFootprintsData)
          console.log('数据长度:', this.allFootprintsData.length)
        } else {
          console.error('获取浏览历史失败:', response.msg)
          uni.showToast({
            title: response.msg || '获取数据失败',
            icon: 'none'
          })
          this.allFootprintsData = []
        }
      } catch (error) {
        console.error('获取浏览历史异常:', error)
        // 使用统一的错误处理
        handleApiError(error, '获取浏览历史失败')
        this.allFootprintsData = []
      } finally {
        uni.hideLoading()
      }
    },

    // 转换浏览历史数据格式
    transformBrowseHistoryData(browseHistoryList) {
      return browseHistoryList.map(item => {
        // 处理图片路径
        let imageUrl = item.productImage || '/static/images/default-product.png';
        // 直接使用图片URL，不需要拼接服务器地址（七牛云存储）
        // 如果是静态资源路径，仍需要处理
        if (imageUrl && !imageUrl.startsWith('http') && !imageUrl.startsWith('/static')) {
          if (imageUrl.startsWith('/images/')) {
            imageUrl = imageUrl.replace('/images/', '/static/images/');
          }
          // 移除/profile/路径的处理，因为现在使用七牛云存储
        }

        // 处理浏览时间格式
        let viewTime = '未知';
        let date = new Date().toISOString().split('T')[0];
        
        if (item.browseTime) {
          // 直接从browseTime字符串中提取日期部分
          if (typeof item.browseTime === 'string' && item.browseTime.length >= 10) {
            date = item.browseTime.substring(0, 10); // 提取YYYY-MM-DD部分
            // 提取时间部分
            if (item.browseTime.length >= 16) {
              viewTime = item.browseTime.substring(11, 16); // 提取HH:MM部分
            }
          } else {
            // 如果是Date对象或其他格式，尝试转换
            const browseDate = new Date(item.browseTime);
            if (!isNaN(browseDate.getTime())) {
              viewTime = browseDate.toTimeString().slice(0, 5); // 格式化为 HH:MM
              date = browseDate.toISOString().split('T')[0]; // 格式化为 YYYY-MM-DD
            }
          }
        } else {
          // 如果没有浏览时间，使用创建时间或更新时间作为备选
          if (item.createTime) {
            if (typeof item.createTime === 'string' && item.createTime.length >= 10) {
              date = item.createTime.substring(0, 10);
              if (item.createTime.length >= 16) {
                viewTime = item.createTime.substring(11, 16);
              }
            } else {
              const createDate = new Date(item.createTime);
              if (!isNaN(createDate.getTime())) {
                viewTime = createDate.toTimeString().slice(0, 5);
                date = createDate.toISOString().split('T')[0];
              }
            }
          } else if (item.updateTime) {
            if (typeof item.updateTime === 'string' && item.updateTime.length >= 10) {
              date = item.updateTime.substring(0, 10);
              if (item.updateTime.length >= 16) {
                viewTime = item.updateTime.substring(11, 16);
              }
            } else {
              const updateDate = new Date(item.updateTime);
              if (!isNaN(updateDate.getTime())) {
                viewTime = updateDate.toTimeString().slice(0, 5);
                date = updateDate.toISOString().split('T')[0];
              }
            }
          }
        }

        const transformedItem = {
          id: item.browseId,
          name: item.productName || '未知商品',
          price: item.productPrice ? parseFloat(item.productPrice).toFixed(2) : '0.00',
          image: imageUrl,
          viewTime: viewTime,
          date: date,
          productId: item.productId,
          browseDuration: item.browseDuration || 0,
          deviceType: item.deviceType || 'unknown'
        };
        return transformedItem;
      });
    },

    // 下拉刷新
    refreshFootprints() {
      this.initFootprints();
      console.log('刷新足迹数据');
    },
    
    // 加载更多足迹
    loadMoreFootprints() {
      if (this.hasMore && !this.isLoading) {
        this.isLoading = true;
        // 立即加载，不延迟
        this.currentPage++;
        this.isLoading = false;
        console.log(`已加载第${this.currentPage}页足迹`);
      }
    },
    
    // 跳转到优惠券页面
    goToCoupon() {
      uni.navigateTo({
        url: '/pages/coupon/index'
      });
    },
    
    // 查看商品
    viewProduct(item) {
      console.log('查看商品:', item);
      // 跳转到商品详情页
      if (item.productId) {
        uni.navigateTo({
          url: `/pages/product/detail?id=${item.productId}`
        });
      } else {
        uni.showToast({
          title: '商品信息异常',
          icon: 'none'
        });
      }
    },

    // 初始化主题色
    async initThemeColor() {
      try {
        // 获取主题色配置
        const themeColor = await getThemeColorFromGlobal()
        
        // 判断是否为异步主题色（数字字符串表示需要从服务器获取）
        if (/^\d+$/.test(themeColor)) {
          // 异步获取主题色
          const primaryColor = await getThemePrimaryColor(themeColor)
          this.primaryColor = primaryColor
          console.log('异步获取主题色 - 我的足迹页面:', themeColor, '主色调:', primaryColor)
        } else {
          // 同步获取主题色（直接使用颜色值）
          this.primaryColor = getThemePrimaryColor(themeColor)
          console.log('同步获取主题色 - 我的足迹页面:', themeColor, '主色调:', this.primaryColor)
        }
      } catch (error) {
        console.error('我的足迹页面主题色初始化失败:', error)
        // 使用默认主题色
        this.primaryColor = '#4A90E2'
      }
    },

    // 设置主题色变量
    setThemeColorVariables(color) {
      const rgb = this.hexToRgb(color)
      return {
        primaryColor: color,
        primaryColorLight: this.lightenColor(color, 20),
        primaryColorShadow: `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.3)`,
        primaryColorBorder: `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.1)`,
        primaryColorBgLight: `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.1)`,
        cardShadow: `0 8rpx 32rpx rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.08)`,
        cardBorder: `1rpx solid rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.1)`,
        productCardShadow: `0 4rpx 16rpx rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.1)`
      }
    },

    // 将十六进制颜色转换为RGB
    hexToRgb(hex) {
      const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
      return result ? {
        r: parseInt(result[1], 16),
        g: parseInt(result[2], 16),
        b: parseInt(result[3], 16)
      } : null
    },

    // 调亮颜色
    lightenColor(color, percent) {
      const rgb = this.hexToRgb(color)
      if (!rgb) return color
      
      const r = Math.min(255, Math.floor(rgb.r + (255 - rgb.r) * percent / 100))
      const g = Math.min(255, Math.floor(rgb.g + (255 - rgb.g) * percent / 100))
      const b = Math.min(255, Math.floor(rgb.b + (255 - rgb.b) * percent / 100))
      
      return `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`
    }
  }
};
</script>

<style lang="scss" scoped>
/* 页面整体样式 */
.footprint-page {
  min-height: 100vh;
  background: #F8FAFC;
  display: flex;
  flex-direction: column;
}



/* 内容区域 */
.content-container {
  flex: 1;
  padding: 24rpx;
}

/* 统计卡片样式 */
.stats-card {
  background: #FFFFFF;
  border-radius: 16rpx;
  margin-bottom: 24rpx;
  padding: 32rpx;
  border: 1rpx solid #E2E8F0;
}

.stats-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 32rpx;
}

.stats-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #1E293B;
}

.coupon-btn {
  background: #3B82F6;
  padding: 12rpx 24rpx;
  border-radius: 24rpx;
}

.coupon-text {
  font-size: 24rpx;
  color: #FFFFFF;
  font-weight: 500;
}

/* 统计网格样式 */
.stats-grid {
  display: flex;
  justify-content: space-between;
  gap: 16rpx;
}

.stats-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24rpx;
  background: #F8FAFC;
  border-radius: 12rpx;
  border: 1rpx solid #E2E8F0;
}

.stats-number {
  font-size: 36rpx;
  font-weight: 600;
  color: #3B82F6;
  margin-bottom: 8rpx;
}

.stats-label {
  font-size: 24rpx;
  color: #64748B;
}

/* 足迹列表样式 */
.footprint-list {
  margin-bottom: 32rpx;
}

.date-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16rpx 0;
  margin-bottom: 16rpx;
}

.date-text {
  font-size: 28rpx;
  font-weight: 600;
  color: #1E293B;
}

.count-text {
  font-size: 24rpx;
  color: #64748B;
}

/* 商品网格样式 */
.product-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16rpx;
}

.product-card {
  background: #FFFFFF;
  border-radius: 12rpx;
  overflow: hidden;
  border: 1rpx solid #E2E8F0;
  transition: all 0.2s ease;
}

.product-card:active {
  transform: scale(0.98);
  border-color: #3B82F6;
}

.product-image {
  width: 100%;
  height: 240rpx;
  object-fit: cover;
}

.product-info {
  padding: 16rpx;
}

.product-name {
  font-size: 24rpx;
  color: #1E293B;
  line-height: 1.4;
  margin-bottom: 8rpx;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.product-price {
  font-size: 26rpx;
  color: #3B82F6;
  font-weight: 600;
  margin-bottom: 4rpx;
}

/* 空状态样式 */
.empty-container {
  background: #FFFFFF;
  border-radius: 16rpx;
  border: 1rpx solid #E2E8F0;
}

.empty-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80rpx 40rpx;
}

.empty-icon {
  font-size: 80rpx;
  margin-bottom: 24rpx;
}

.empty-text {
  font-size: 28rpx;
  color: #1E293B;
  margin-bottom: 8rpx;
  font-weight: 500;
}

.empty-desc {
  font-size: 24rpx;
  color: #64748B;
}

/* 底部间距 */
.loading-status {
  padding: 32rpx 0;
  text-align: center;
  color: #64748B;
  font-size: 24rpx;
}

.bottom-space {
  height: 60rpx;
}
</style>